import {
  getWorkOrderInforExtendByPage,
  getManufactInfo,
  getDrawingInfo,
  getBomOverview,
  exportWorkOrderInfor,
  getDrawingPrintHstByWoIdAndPage,
  addDrawingPrintHst,
  viewBaseInfo,
  getWorkOrderInforExtendWarnByPage,
} from '@/services/product/workOrderInfor';
import {
  getWorkOrderInforProgress,
  getWorkOrderInforProgressByDate,
} from '@/services/board/productboard';
import { getErrorReportProgress } from '@/services/board/projectboard';

import '@/pages/product/product.module.less';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Tabs, Modal, Table, Row, Col, message, Tag, Card, Statistic } from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { Ellipsis } from '@/components/Ellipsis';
import moment from 'moment';
import './card_style.less';
import { Pie } from '@ant-design/plots';
import ReportForm from '@/pages/board/reportForm';
import ErrorReport from '@/pages/platform/errorReport';

import { tableSearchPublicConfig } from '@/utils/filterUtils';

const WorkOrderInfor: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const ref = useRef(null);
  const [open, setOpen] = useState(false); //控制查看Modal的开关
  const [bomData, setBomdata] = useState();
  const [drawData, setDrawdata] = useState();
  const [draw_print, setdraw_print] = useState();
  const [recordCur, setRecord] = useState();
  const [manufactInfo, setManufactInfo] = useState();
  const [pagestate, setPageState] = useState<string>('0');
  const [thewoid, setthewoid] = useState('');
  const [warnFlag, setWarnFlag] = useState('0');
  const [errordata, setError_data] = useState([]);
  const [wodata_forcard, setwodata_forcard] = useState([]);
  const [current_state, setcurrent_state] = useState(''); //工单状态，是否结束
  const [current_alert, setcurrent_alert] = useState(''); //工单状态，是否正常

  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [ex_list, setex_list] = useState(false);

  const [wofinished_forcard, setwofinished_forcard] = useState([]); // 完成工单卡片信息

  //类型定义
  type tabType = {
    name: string;
    label: string;
    content: JSX.Element;
  };

  //Tabs里面的表格
  interface DataType {
    title: string;
    dataIndex: string;
    key: string;
  }

  //排程状态数组
  const statusArray = ['未排程', '自动排程', '手动排程'];
  const releaseStatus = ['未释放', '已释放'];
  const statusChange = ['未变更', '存在变更'];
  const alertStatus = ['未开始', '执行中', '已完成', '未按计划开始', '未按计划结束']; //工单预警状态
  const state = ['未开始', '执行中', '已完成'];

  //定义一个样式
  const styleCommon = { fontSize: 16, marginBottom: 20 };
  const styleTitle = { fontWeight: 600 };

  const bomColumns: ColumnsType<DataType> = [
    {
      title: '物料编号',
      dataIndex: 'materialCode',
      key: 'materialCode',
    },
    {
      title: '物料名称',
      dataIndex: 'materialName',
      key: 'materialName',
    },
    {
      title: '物料型号',
      dataIndex: 'materialSpec',
      key: 'materialSpec',
    },

    {
      title: '（安装）位置号',
      dataIndex: 'positionNo',
      key: 'positionNo',
    },
    {
      title: '变更状态',
      dataIndex: 'changeStatus',
      key: 'changeStatus',
      render: (text, record, _, action) => {
        return <div>{record.changeStatus == 0 ? '未变更' : '存在变更'}</div>;
      },
    },
    {
      title: '需求数量',
      dataIndex: 'materialQty',
      key: 'materialQty',
      // render: (text, record, _, action) => {
      //   return record.materialQty + '/' + record.unit;
      // },
    },
    {
      title: '已发数量',
      dataIndex: 'outboundQty',
      key: 'outboundQty',
    },
    {
      title: '未发数量',
      dataIndex: 'notIssuedQty',
      key: 'notIssuedQty',
    },
    {
      title: '单位',
      dataIndex: 'unit',
      key: 'unit',
    },
  ];

  // 图纸列表
  const drawColumns: ColumnsType<DataType> = [
    {
      title: '图纸类型',
      dataIndex: 'category',
      key: 'category',
      align: 'center',
      sorter: true,
    },
    {
      title: '图纸编号',
      dataIndex: 'drawingCode',
      key: 'drawingCode',
      align: 'center',
      sorter: true,
    },
    {
      title: '文件名称',
      dataIndex: 'drawingName',
      key: 'drawingName',
      align: 'center',
      sorter: true,
    },
    // {
    //   title: '是否打印',
    //   dataIndex: 'printFlag',
    //   key: 'printFlag',
    //  align: 'center',sorter: true,
    //   render: (text, record, _, action) => {
    //     return <div>{record.printFlag == 0 ? '未打印' : '已打印'}</div>;
    //   },
    // },
    {
      title: '归档状态',
      dataIndex: 'archiveFlag',
      key: 'archiveFlag',
      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return <div>{record.archiveFlag == 0 ? '使用中' : '已归档'}</div>;
      },
    },
    {
      title: '上传人',
      dataIndex: 'createName',
      key: 'createName',
      align: 'center',
      sorter: true,
    },
    {
      title: '上传时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      render: (text, record, _, action) => [
        <a
          key={record.id}
          onClick={async () => {
            const url = await getDrawingPreviewUrl(record.id);
            const w = window.open('about:blank');
            if (url && url?.message) {
              w.location.href = url.message;
            } else {
              w.location.href = record.drawingUrl;
            }
            // w.location.href = record.drawingUrl;
            // 获取当前用户
            const getuserlist = await viewBaseInfo(null);
            // 新增打印信息
            const addparams = {
              drawingCode: record.drawingCode,
              drawingDesc: record.drawingName,
              drawingSequence: record.drawingSequence,
              drawingUrl: record.drawingUrl,
              printBy: getuserlist.data.name,
              printTime: moment().format('YYYY-MM-DD HH:mm:ss'),
              productCode: record.productCode,
              productDrawingInfoId: record.id,
              workOrderInforId: thewoid,
            };
            const result = addDrawingPrintHst(addparams);
            if (result != null) {
              message.success('打印成功');
            }
            //更新图纸打印列表
            const printParams = {
              workOrderInforId: thewoid,
              pageEntity: {
                current: 1,
                filters: [],
                pageSize: 7,
                sorters: [],
              },
            };
            const drawPrint = await getDrawingPrintHstByWoIdAndPage(printParams);
            drawPrint.data.content.map((item: any) => {
              item.key = thewoid;
            });
            setdraw_print(drawPrint.data.content);
            actionRef.current!.reload();
            setOpen(true);
          }}
        >
          预览打印
        </a>,
      ],
    },
  ];

  // 图纸打印list
  const draw_printcolumns: ColumnsType<DataType> = [
    {
      title: '柜体编号',
      dataIndex: 'productCode',
      key: 'productCode',
      align: 'center',
      sorter: true,
    },
    {
      title: '图纸编号',
      dataIndex: 'drawingCode',
      key: 'drawingCode',
      align: 'center',
      sorter: true,
    },
    {
      title: '文件名称',
      dataIndex: 'drawingDesc',
      key: 'drawingDesc',
      align: 'center',
      sorter: true,
    },
    // {
    //   title: '柜体图纸链接',
    //   dataIndex: 'drawingUrl',
    //   key: 'drawingUrl',
    // },
    {
      title: '打印时间',
      dataIndex: 'printTime',
      key: 'printTime',
      align: 'center',
      sorter: true,
    },
    {
      title: '打印人员',
      dataIndex: 'printBy',
      key: 'printBy',
      align: 'center',
      sorter: true,
    },
  ];

  const manuColumns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'processName',
      align: 'center',
      sorter: true,
      key: 'processName',
    },
    {
      title: '柜体编号',
      dataIndex: 'batchProductCode',
      align: 'center',
      sorter: true,
      key: 'batchProductCode',
      width: 100,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体类型',
      dataIndex: 'productType',
      align: 'center',
      sorter: true,
      key: 'productType',
      render: (text) => {
        return <div>{text ? text : '-'}</div>;
      },
    },
    {
      title: '计划开始时间',
      dataIndex: 'planManufactStartDate',
      align: 'center',
      sorter: true,
      key: 'planManufactStartDate',
    },
    {
      title: '计划结束时间',
      dataIndex: 'planManufactEndDate',
      align: 'center',
      sorter: true,
      key: 'planManufactEndDate',
    },
    {
      title: '实际开始时间',
      dataIndex: 'manufactStartDate',
      key: 'manufactStartDate',
      align: 'center',
      sorter: true,
      render: (text) => {
        return <div>{text ? text : '-'}</div>;
      },
    },
    {
      title: '实际结束时间',
      dataIndex: 'manufactEndDate',
      key: 'manufactEndDate',
      align: 'center',
      sorter: true,
      render: (text) => {
        return <div>{text ? text : '-'}</div>;
      },
    },
    {
      title: '标准工时',
      dataIndex: 'standManufactWorkhour',
      key: 'standManufactWorkhour',
      align: 'center',
      sorter: true,
      render: (text) => {
        return text == 0 ? '-' : text;
      },
    },
    // {
    //   title: '操作',
    //   key: 'option',
    //   fixed: 'right',
    //  align: 'center',sorter: true,
    //   render: (text, record, _, action) => [<a key="needKey"> 调整</a>, <a key="saveKey"> 保存</a>],
    // },
  ];

  //取消查看Modal的弹窗
  const handleCancel = () => {
    setOpen(false);
  };

  //点击查看弹出Modal
  const openLookfor = async (id: string, record: any) => {
    //获取Tab的四种信息
    //1、第一种Bom
    const bomInfoTab = await getBomOverview(id);
    bomInfoTab.data.map((item: any) => {
      item.key = item.id;
    });
    setBomdata(bomInfoTab.data);
    //2、第二种图纸
    const drawImage = await getDrawingInfo(id);
    drawImage.data.map((item: any) => {
      item.key = id;
    });
    setDrawdata(drawImage.data);
    //3、设置本来的record信息
    setRecord(record);
    console.log('record正常', record);
    //4、getManufactInfon进度信息
    const manufactInfoTemp = await getManufactInfo(id);
    if (manufactInfoTemp) {
      manufactInfoTemp.data.map((item: any) => {
        item.key = item.id;
      });
      setManufactInfo(manufactInfoTemp.data);
    }
    //5、图纸打印列表
    const printParams = {
      workOrderInforId: id,
      pageEntity: {
        current: 1,
        filters: [],
        pageSize: 7,
        sorters: [],
      },
    };
    const drawPrint = await getDrawingPrintHstByWoIdAndPage(printParams);
    drawPrint.data.content.map((item: any) => {
      item.key = item.id;
    });
    setdraw_print(drawPrint.data.content);
    setOpen(true);
  };

  //定义Tabs的子结构的数组
  const tabList: tabType[] = [
    {
      name: 'tab1',
      label: '详情信息',
      content: (
        <div style={{ height: 500 }}>
          <Row>
            <Col span={4} />
            <Col span={8}>
              <div style={styleCommon}>
                <span style={styleTitle}>柜体类型 </span> :&nbsp;
                {recordCur == undefined ? '' : recordCur!.productType}
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}>柜体编号</span> :&nbsp;
                {recordCur == undefined ? '' : recordCur!.batchProductCode}
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</span>{' '}
                :&nbsp; 1
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}>项目名称</span> :&nbsp;
                {recordCur == undefined ? '' : recordCur!.projectName}
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}>项目编号</span> :&nbsp;
                {recordCur == undefined ? '' : recordCur!.projectCode}
              </div>
            </Col>
            <Col span={8}>
              <div style={styleCommon}>
                <span style={styleTitle}>下&nbsp;&nbsp;发&nbsp;&nbsp;状&nbsp;&nbsp;态</span> :&nbsp;
                {recordCur == undefined ? '' : releaseStatus[recordCur.releaseFlag]}
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}>排&nbsp;&nbsp;程&nbsp;&nbsp;状&nbsp;&nbsp;态</span> :&nbsp;
                {recordCur == undefined ? '' : statusArray[recordCur.scheduledFlag]}
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}>计划开始时间</span> :&nbsp;
                {recordCur == undefined ? '' : recordCur!.planManufactStartDate}
              </div>
              <div style={styleCommon}>
                <span style={styleTitle}> 计划结束时间</span> :&nbsp;
                {recordCur == undefined ? '' : recordCur!.planManufactEndDate}
              </div>
              {/* <div style={styleCommon}>
                备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:
                {recordCur == undefined ? '' : recordCur!.memo}
              </div> */}
            </Col>
            <Col span={4} />
          </Row>
        </div>
      ),
    },
    {
      name: 'tab2',
      label: 'BOM列表',
      content: (
        <div style={{ height: 500 }}>
          <Table columns={bomColumns} bordered dataSource={bomData} pagination={{ pageSize: 7 }} />
        </div>
      ),
    },
    {
      name: 'tab3',
      label: '生产进度',
      content: (
        <div style={{ height: 500 }}>
          <Table
            columns={manuColumns}
            bordered
            dataSource={manufactInfo}
            pagination={{ pageSize: 7 }}
          />
        </div>
      ),
    },
    {
      name: 'tab4',
      label: '图纸列表',
      content: (
        <div style={{ height: 500 }}>
          <Table
            columns={drawColumns}
            bordered
            dataSource={drawData}
            pagination={{ pageSize: 7 }}
          />
        </div>
      ),
    },
    // {
    //   name: 'tab5',
    //   label: '图纸打印信息',
    //   content: (
    //     <div style={{ height: 500 }}>
    //       <Table
    //         columns={draw_printcolumns}
    //         bordered
    //         dataSource={draw_print}
    //         pagination={{ pageSize: 7 }}
    //       />
    //     </div>
    //   ),
    // },
  ];

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      align: 'center',
      sorter: true,
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',

      align: 'center',
      sorter: true,
      width: 200,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',

      align: 'center',
      sorter: true,
      width: 300,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '批次交货日期',
      dataIndex: 'batchDeliveryDate',

      valueType: 'date',
      align: 'center',
      sorter: true,
      width: 130,
      render: (text) => <>{Ellipsis(text)}</>,
      search: false,
    },
    // {
    //   title: '批次交货日期',
    //   dataIndex: 'batchDeliveryDate',
    //   valueType: 'dateRange',
    //   hideInTable: true,
    // },
    {
      title: '工单编号',
      dataIndex: 'wo',
      align: 'center',
      sorter: true,
      width: 240,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体编号',

      dataIndex: 'batchProductCode',
      width: 240,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    // {
    //   title: '当前批次',
    //   dataIndex: 'batchCount',
    //  align: 'center',sorter: true,

    //   render: (text, record, _, action) => {
    //     return record.currentBatch + '/' + record.batchCount;
    //   },
    // },
    // {
    //   title: '柜体类型',
    //   dataIndex: 'productType',
    //  align: 'center',sorter: true,
    // },
    {
      title: '状态',
      dataIndex: 'state',
      width: 100,
      align: 'center',
      sorter: true,
      render: (text) => {
        return <div>{state[Number(text)]}</div>;
      },
      search: false,
      // valueType: 'select',
      // request: async () => [
      //   { label: '未开始', value: 0 },
      //   { label: '执行中', value: 1 },
      //   { label: '已结束', value: 2 },
      // ],
    },
    {
      title: '数量齐套率',
      dataIndex: 'numPercent',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,
      render: (text,record) => {
        if(record.numPercent){
          return <div>{(Number(text)*100).toFixed(2) + '%'}</div>
        }
        else
        return <div>{text}</div>
      }
      // render: (text, record, _, action) => {
      //   return <div>100</div>;
      // },
    },
    {
      title: '种类齐套率',
      dataIndex: 'typePercent',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,
      render: (text,record) => {
        if(record.typePercent){
          return <div>{(Number(text)*100).toFixed(2) + '%'}</div>
        }
        else
        return <div>{text}</div>
      }
    },
    {
      title: '预警',
      dataIndex: 'alertStatus',
      width: 100,
      align: 'center',
      sorter: true,
      search: false,
      render: (text) => {
        let color = 'white-retangle base-retangle';
        if (text === 1) {
          color = 'green-retangle base-retangle';
        } else if (text === 2) {
          color = 'black-retangle base-retangle';
        } else if (text === 3) {
          color = 'purple-retangle base-retangle';
        } else if (text === 4) {
          color = 'red-retangle base-retangle';
        }
        return <div className={color} />;
      },
    },
    {
      title: '释放标识',
      dataIndex: 'releaseFlag', // 0 未释放 1-已释放
      width: 150,
      align: 'center',
      sorter: true,
      render: (text) => {
        return <div>{text === 0 ? '未释放' : '已释放'}</div>;
      },
      search: false,
      // valueType: 'select',
      // request: async () => [
      //   { label: '未释放', value: 0 },
      //   { label: '已释放', value: 1 },
      // ],
    },
    {
      title: '释放时间',
      dataIndex: 'releaseTime',
      width: 110,
      valueType: 'date',
      align: 'center',
      sorter: true,
      search: false, //修改为时间的话，搜索不太好做，因为这里传值API对应参数类型会有问题
    },
    {
      title: '排程状态',
      width: 120,
      dataIndex: 'scheduledFlag', // 0- 未排程 1-自动排程 2-手动排程
      align: 'center',
      sorter: true,
      render: (text) => {
        return <div>{statusArray[Number(text)]}</div>;
      },
      search: false,
      // valueType: 'select',
      // request: async () => [
      //   { label: '未排程', value: 0 },
      //   { label: '自动排程', value: 1 },
      //   { label: '手动排程', value: 2 },
      // ],
    },
    /* 生产进度添加 */
    /*  {
      title: '生产进度',
      dataIndex: 'children',
      align: 'center',
      sorter: true,
      width: 480,
      search: false,
      render: (text) => (
        <div className="projectScheduleTag">
          {text &&
            text.map((tag: any) => {
              let color;
              //条件渲染生产进度的流程颜色
              switch (tag.alertStatus) {
                case 0:
                  color = 'blue';
                  break;
                case 1:
                  color = 'green';
                  break;
                case 2:
                  color = 'yellow';
                  break;
                case 3:
                  color = 'gray';
                  break;
                case 4:
                  color = 'purple';
                  break;
                case 5:
                  color = 'red';
                  break;
              }
              return (
                <Tag color={color} key={tag.id}>
                  {tag.processName}
                </Tag>
              );
            })}
        </div>
      ),
    }, */
    {
      title: '工单完成日期', //表头显示的名称
      search: false,
      width: 120,
      // dataIndex: 'createTime',
      dataIndex: 'closeTime',
      align: 'center',
      sorter: true,
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      width: 200,
      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      width: 100,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      width: 80,
      render: (text, record, _, action) => [
        <a
          key="lookforKey"
          onClick={(e) => {
            openLookfor(record.id, record);
            setthewoid(record.id);
          }}
        >
          查看
        </a>,
      ],
    },
  ];

  // 环形图
  const data = [
    {
      type: '正常',
      value: wodata_forcard[3],
    },
    {
      type: '预警',
      value: wodata_forcard[4],
    },
    {
      type: '超期',
      value: wodata_forcard[5],
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    color: ({ type }) => {
      if (type === '正常') {
        return '#389e0d';
      } else if (type === '预警') {
        return 'purple-retangle base-retangle';
      } else {
        return '#cf1322';
      }
    },
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 8,
      },
    },
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          fontSize: 8,
        },
      },
    },
    legend: false,
    width: 180,
    height: 180,
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <div style={{ marginBottom: '16px' }}>
        {/* 工单进度卡片 */}
        <div className="wo_cardsec">
          <div className="main">
            <div className="head">工单进度</div>
            <div className="body">
              <div className="left_box" />
              <div className="left">
                <div className="left_top">
                  <div
                    className="left_top_number"
                    onClick={() => {
                      setcurrent_state('');
                      setcurrent_alert('');
                      setWarnFlag('0');

                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[0]}</span>
                  </div>
                  <div className="left_text">工单数量</div>
                </div>
                <div className="left_bottom">
                  <div className="left_bottom1">
                    <div
                      className="left_bottom_number1"
                      onClick={() => {
                        setcurrent_state('未开始');
                        setcurrent_alert('');
                        setWarnFlag('0');

                        actionRef.current!.reload();
                      }}
                    >
                      <span>{wodata_forcard[1]}</span>
                    </div>
                    <div className="left_bottom_text1">未开始</div>
                  </div>
                  <div className="left_bottom2">
                    <div
                      className="left_bottom_number2"
                      onClick={() => {
                        setcurrent_state('执行中'); //
                        setcurrent_alert('');
                        setWarnFlag('0');

                        actionRef.current!.reload();
                      }}
                    >
                      <span>{wodata_forcard[2]}</span>
                    </div>
                    <div className="left_bottom_text2">执行中</div>
                  </div>
                </div>
              </div>
              <div className="chart">
                <Pie {...config} />
              </div>
              <div className="right">
                <div className="right1">
                  <div
                    className="right_number1"
                    onClick={() => {
                      setcurrent_alert('正常'); //
                      setcurrent_state('');
                      setWarnFlag('0');

                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[3]}</span>
                  </div>
                  <div className="right_text">正常</div>
                </div>
                <div className="right2">
                  <div
                    className="right_number2"
                    onClick={() => {
                      setcurrent_alert('预警');
                      setcurrent_state('');
                      setWarnFlag('0');
                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[4]}</span>
                  </div>
                  <div className="right_text">预警</div>
                </div>
                <div className="right3">
                  <div
                    className="right_number3"
                    onClick={() => {
                      setcurrent_alert('超期');
                      setcurrent_state('');
                      setWarnFlag('1');
                      actionRef.current!.reload();
                    }}
                  >
                    <span>{wodata_forcard[5]}</span>
                  </div>
                  <div className="right_text">超期</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 完成工单卡片 */}
        <div className="dcardsec" style={{ marginLeft: '12px' }}>
          <div className="tag">完成工单</div>
          <Row align="middle" style={{ width: '200px', textAlign: 'center', height: '120px' }}>
            <Col span={12}>
              <Statistic
                value={wofinished_forcard[0] || 0}
                valueStyle={{ fontSize: '30px', color: '#055C51', fontWeight: '600' }}
              />
              <div className="sectitle">本月</div>
            </Col>

            <Col span={12}>
              <Statistic
                value={wofinished_forcard[1] || 0}
                valueStyle={{ fontSize: '30px', color: '#055C51', fontWeight: '600' }}
              />
              <div className="sectitle">本年</div>
            </Col>
          </Row>
        </div>

        {/* 异常处理卡片 */}
        <div className="dcardsec" style={{ marginLeft: '12px' }}>
          <div className="tag">异常处理</div>
          <Row align="middle" style={{ width: '200px', textAlign: 'center', height: '120px' }}>
            <Col
              span={24}
              onClick={() => {
                setex_list(true);
              }}
            >
              <Statistic
                value={errordata[0] || 0}
                valueStyle={{ fontSize: '30px', color: '#FF4D4F' }}
              />
              <div className="sectitle">异常处理</div>
            </Col>
          </Row>
        </div>
      </div>

      <div className="workOrderInfor">
        <ProTable
          className="protable"
          headerTitle="生产工单查询"
          actionRef={actionRef} //用于触发刷新操作等，看api
          rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
          search={{
            // 搜索框配置
            ...tableSearchPublicConfig,
          }}
          toolBarRender={(action, { selectedRows }) => [
            <div className="projectScheduleGroup">
              <span>待执行：</span>
              <img src="../wks.gif" />
              <span>执行中：</span>
              <img src="../zxz.gif" />
              <span>已完成：</span>
              <img src="../wc.gif" />
              <span>未按计划开始：</span>
              <img src="../purple.png" />
              <span>未按计划结束：</span>
              <img src="../red.png" />
            </div>,
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                const filters = filterTranNew(ref.current.getFieldsValue());
                exportWorkOrderInfor({
                  current: 1,
                  pageSize: 5000,
                  filters: filters,
                }).then((res) => {
                  const aLink = document.createElement('a');
                  document.body.appendChild(aLink);
                  aLink.style.display = 'none';
                  aLink.href = window.URL.createObjectURL(res);
                  aLink.setAttribute('download', `WorkOrderInfor.xls`);
                  aLink.click();
                  document.body.removeChild(aLink);
                });
              }}
              type="primary"
            >
              导出
            </Button>,
          ]}
          request={async (params = {}, sort, filter) => {
            console.log(warnFlag);
            const sorters = sortTran(sort);
            const filters = filterTranNew(params);
            if (warnFlag == '0') {
              const result = await getWorkOrderInforExtendByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              const temp = result.data.content.map((item: any) => {
                item.workOrderInforEx = { ...item.workOrderInforEx, children: item.children };
                return item.workOrderInforEx;
              });
              // 筛选页面的值
              const temp_res = temp.filter((item: any) => {
                if (current_state == '' && current_alert == '') {
                  return item.state;
                } else if (current_state == '未开始') {
                  return item.state == '0';
                } else if (current_state == '执行中') {
                  return item.state == '1';
                } else if (current_alert == '正常') {
                  return item.alertStatus != '4' && item.alertStatus != '5';
                } else if (current_alert == '预警') {
                  return item.alertStatus == '4';
                } else if (current_alert == '超期') {
                  return item.alertStatus == '5';
                }
              });

              console.log(temp_res, 'temp_res');
              // 卡片
              const card_data = await getWorkOrderInforProgress(null);
              setwodata_forcard(card_data.data);

              // 获取异常处理卡片数据
              const error1 = await getErrorReportProgress(null);
              setError_data(error1.data);

              // 获取完成的工单统计数据(卡片数据)
              const wofinished_res = await getWorkOrderInforProgressByDate(null);
              setwofinished_forcard(wofinished_res.data || []);
              return {
                data: current_state == '' && current_alert == '' ? temp : temp_res,
                total:
                  current_state == '' && current_alert == ''
                    ? temp.totalElements
                    : temp_res.totalElements,
                success: result.success,
              };
            } else {
              const result = await getWorkOrderInforExtendWarnByPage(null);
              console.log('获取的超时数据', result);

              return {
                data: result.data,
                total: result.data.totalElements,
                success: result.success,
              };
            }
          }}
          columns={columns}
          pagination={{
            defaultPageSize: 100,
            defaultCurrent: 1,
            pageSizeOptions: [100, 500, 1000],
            showSizeChanger: true,
          }}
          scroll={{ x: 2000, y: 350 }}
          rowSelection={{}}
        />
      </div>
      {/* 报表模块 */}
      <Card
        bodyStyle={{ padding: '0px 24px 12px 24px' }}
        bordered={false}
        style={{ marginBottom: '40px' }}
      >
        <div className="reportFormCardTitle">报表统计</div>
        <ReportForm />
      </Card>
      {/* Modal查看功能 */}
      <Modal
        open={open}
        title="查看工单"
        destroyOnClose
        width={1900}
        // style={{ height: '1000' }}
        //onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={() => handleCancel()}>
            关闭
          </Button>,
        ]}
      >
        <Tabs
          tabPosition="left"
          items={tabList.map((item, i) => {
            const id = String(i + 1);
            return {
              label: item.label,
              key: id,
              children: <div>{item.content}</div>,
            };
          })}
        />
      </Modal>

      {/* 查看异常处理 */}
      <Modal
        title="项目看板-异常列表"
        visible={ex_list}
        onOk={() => setex_list(false)}
        confirmLoading={confirmLoading}
        onCancel={() => setex_list(false)}
        width={1200}
        footer={[]}
      >
        <ErrorReport />
      </Modal>
    </PageHeaderWrapper>
  );
};
export default WorkOrderInfor;
